<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
  <Content type="html">
  <![CDATA[
    <!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>
  
<!-- <button type="button" onclick="onApiLoad()">onApiLoad</button> -->

<script type="text/javascript">
  
  var developerKey = 'AIzaSyCW-AfZPRGuLMi8xZck3cwPrKlqCsXLsqY';
  var clientId = '32395032788-av1u4bv00h6eneacvo0fvnq2098nmgco.apps.googleusercontent.com';
  
  var scope = ['https://www.googleapis.com/auth/photos'];

  var pickerApiLoaded = false;
  var oauthToken;
  
  function onApiLoad() {
    document.getElementById("demo").innerHTML = "onApiLoad";
   gapi.load('auth', {'callback': onAuthApiLoad});
   gapi.load('picker', {'callback': onPickerApiLoad});
  }
  
  function onAuthApiLoad() {
    document.getElementById("demo").innerHTML = "onAuthApiLoad";
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,
              'immediate': false
            },
            handleAuthResult);
      }
  
  function onPickerApiLoad() {
    document.getElementById("demo").innerHTML = "onPickerApiLoad";
        pickerApiLoaded = true;
        createPicker();
      }
  
  function handleAuthResult(authResult) {
    document.getElementById("demo").innerHTML = "handleAuthResult";
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }
  
  function createPicker() {
  document.getElementById("demo").innerHTML = "createPicker";
       if (pickerApiLoaded && oauthToken) {
        var picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.PHOTOS).
            setOAuthToken(oauthToken).
            setDeveloperKey(developerKey).
            setCallback(pickerCallback).
            build();
        picker.setVisible(true);
      }
    }
  
  //function createPicker() {
  //  var picker = new google.picker.PickerBuilder()
  //      .addView( new google.picker.DocsUploadView() )
  //      .addView( new google.picker.DocsView() )
  //      .setOAuthToken( oauthToken )
  //      .setDeveloperKey( 'AIzaSyCW-AfZPRGuLMi8xZck3cwPrKlqCsXLsqY' )
  //      .build();

    // Render the picker model
  //  picker.setVisible( true );
//}
  
  function pickerCallback(data) {
    document.getElementById("demo").innerHTML = "pickerCallback";
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
  
  function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed";
  }
  
</script>
</head>
<body>
  <div id="result"></div>
  <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
</html>
  ]]>
  </Content>
</Module>